<template>
  <div class="nav">
    <ul class="navbar">
      <li v-for="(item, index) in navListLeft" :key="index" :class="nowIndex === item.index ? 'li_sel': ''" @click="goRouter(item, index + 1)">
        <img :src="item.img">
        <p>{{ item.title }}</p>
      </li>
    </ul>
    <div class="navTitle">
      <div class="box">
        <!-- <p class="wave1 pic" /> -->
      </div>
      <img src="@/assets/pic/title.png" alt="">
      <!-- <img src="@/assets/pic/title1.png" alt=""> -->
      <div class="box">
        <!-- <p class="wave2 pic" /> -->
      </div>
    </div>
    <ul class="navbar">
      <li v-for="(item, index) in navListRight" :key="index" :class="nowIndex === item.index ? 'li_sel': ''" @click="goRouter(item, index + 4)">
        <img :src="item.img">
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
// import { getRouter } from '@/utils/auth'
export default {
  data() {
    return {
      navList: [{
        img: require('@/assets/pic/nav_home@2x.png'),
        title: '首页',
        router: '/'
      },
      {
        img: require('@/assets/pic/nav_danger@2x.png'),
        title: 'GIS',
        // router: '/device/table'
        router: '/gis/gis'
      }, {
        img: require('@/assets/pic/nav_danger@2x.png'),
        title: '设备',
        // router: '/device/table'
        router: '/deviceChart/deviceChart'
      },
      {
        img: require('@/assets/pic/nav_emergency@2x.png'),
        title: '传感器',
        router: '/deviceOption/DeviceOption'
      }, {
        img: require('@/assets/pic/nav_home_warning@2x.png'),
        title: '预警',
        // router: '/warning/warning'
        router: '/warning/warning'
      },

      // {
      //   img: require('@/assets/pic/nav_danger@2x.png'),
      //   title: '设备',
      //   // router: '/device/table'
      //   router: '/deviceChart/deviceChart'
      // },

      {
        img: require('@/assets/pic/nav_setting@2x.png'),
        title: '设置',
        router: '/issued/user'
      }],
      navListLeft: [],
      navListRight: [],
      nowIndex: 1
    }
  },
  computed: {
    route() {
      return this.$route.path
    }
  },
  watch: {
    route(val) {
      if (val === '/danger') {
        this.nowIndex = 2
      }
    }
  },
  mounted() {
    this.getCheck()
  },
  methods: {
    getCheck() {
      const list = ['首页']
      // const endList = this.navList.filter(item => list.some(its => its === item.title))
      const endList = this.navList
      endList.forEach((item, index) => {
        if (index < 3) {
          this.navListLeft.push(item)
        } else {
          this.navListRight.push(item)
        }
      })
    },
    goRouter(item, index) {
      this.$router.push({ path: item.router })
      this.nowIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar {
  display: flex;
  align-items: center;
  // width: 25vw;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 0.46rem;
  margin: 0 0.16rem;
  background: url("~@/assets/pic/img_home_nav@2x.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  img {
    width: 0.22rem;
    height: 0.22rem;
    margin-right: 0.075rem;
  }
  p {
    font-size: 0.14rem;
    color: #41BDFF;
  }
}
.li_sel {
  background: url("~@/assets/pic/img_home_nav@2x_sel.png") no-repeat;
  background-size: 100% 100%;
}
.navTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 4.5rem;
  height: 8vh;
  margin: 0 0.3rem;
  img {
    width: 58%;
  }
  .box{
    position: relative;
    overflow:hidden;
    height:100%;
    width: 20%;
    p{
      margin: 0;
    }
    .pic {
      width: 200%;
      height: 100%;
      transform-origin:center;
      position:absolute;
      top: 0%;
    }
    .wave1 {
      right:0;
      background: url("~@/assets/pic/line1.png") no-repeat;
      background-size: cover;
      animation:anim_wave1 2s linear infinite;
    }
    .wave2 {
      left:0;
      background: url("~@/assets/pic/line2.png") no-repeat;
      background-size: cover;
      animation:anim_wave2 2s linear infinite;
    }
    @keyframes anim_wave1 {
        0% {
            transform: translateX(0)
        }
        50% {
            transform: translateX(25%)
        }
        100% {
            transform: translateX(50%)
        }
    }
    @keyframes anim_wave2 {
        0% {
            transform: translateX(0)
        }
        50% {
            transform: translateX(-25%)
        }
        100% {
            transform: translateX(-50%)
        }
    }
  }
}
@media screen and (max-width: 1400px) {
  li {
    width: 1rem;
    height: 0.4rem;
    img {
      width: 0.2rem;
      height: 0.2rem;
    }
    p {
      font-size: 0.12rem;
    }
  }
  .navTitle {
    width: 4rem;
    height: 7.5vh;
    margin: 0 0.15rem;
  }
}
</style>
